<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生志愿填报系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-blue: #1a5f7a;
            --primary-green: #28a745;
            --secondary-blue: #2389c9;
            --secondary-green: #2ca58d;
            --light-bg: #f0f8ff;
            --border-color: #cde0e9;
            --text-dark: #2c3e50;
            --text-light: #5a7a8c;
            --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: #edf2f7;
            color: var(--text-dark);
            padding: 15px;
        }

        .container {
            display: grid;
            grid-template-columns: 1fr auto;
            grid-template-rows: auto 1fr;
            gap: 15px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .header {
            grid-column: 1 / -1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(to right, var(--primary-blue), var(--secondary-green));
            padding: 10px 20px;
            border-radius: 8px;
            color: white;
            box-shadow: var(--shadow);
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo i {
            font-size: 28px;
        }

        .header-buttons {
            display: flex;
            gap: 10px;
        }

        .btn {
            padding: 8px 15px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .btn-main {
            background: white;
            color: var(--primary-blue);
        }

        .btn-main:hover {
            background: #e6f7ff;
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.4);
        }

        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        .student-info {
            grid-column: 1;
            grid-row: 2;
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: var(--shadow);
        }

        .section-title {
            padding-bottom: 8px;
            border-bottom: 2px solid var(--secondary-blue);
            margin-bottom: 15px;
            color: var(--primary-blue);
            font-size: 18px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 15px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .form-group label {
            font-size: 14px;
            color: var(--text-light);
            font-weight: 600;
        }

        .form-control {
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            background: var(--light-bg);
            transition: border 0.3s;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--secondary-blue);
            box-shadow: 0 0 0 2px rgba(26, 95, 122, 0.1);
        }

        .sidebar {
            grid-column: 2;
            grid-row: 2;
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: var(--shadow);
            min-width: 220px;
        }

        .actions {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 20px;
        }

        .btn-action {
            background: linear-gradient(to right, var(--primary-green), var(--secondary-green));
            color: white;
            justify-content: center;
        }

        .btn-action:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }

        .filters {
            grid-column: 1;
            grid-row: 3;
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: var(--shadow);
            margin-top: 10px;
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }

        .filter-section {
            background: var(--light-bg);
            padding: 15px;
            border-radius: 5px;
            border-left: 4px solid var(--secondary-green);
        }

        .filter-section h3 {
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--primary-blue);
        }

        .checkbox-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            font-size: 14px;
        }

        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .checkbox-item input {
            accent-color: var(--primary-blue);
        }

        .regions {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }

        .region-group {
            background: rgba(255, 255, 255, 0.8);
            padding: 10px;
            border-radius: 5px;
        }

        .region-group h4 {
            margin-bottom: 8px;
            font-size: 14px;
            color: var(--text-light);
        }

        .region-list {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .note {
            font-size: 12px;
            color: var(--text-light);
            font-style: italic;
            margin-top: 15px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 5px;
            border-left: 3px solid #ffc107;
        }

        .main-footer {
            grid-column: 1 / -1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 20px;
            background: white;
            border-radius: 8px;
            margin-top: 15px;
            box-shadow: var(--shadow);
            font-size: 14px;
            color: var(--text-light);
        }

        @media (max-width: 1200px) {
            .container {
                grid-template-columns: 1fr;
                grid-template-rows: auto auto auto auto;
            }

            .sidebar {
                grid-column: 1;
                grid-row: 4;
                min-width: auto;
            }

            .filters {
                grid-row: 3;
            }
        }

        @media (max-width: 768px) {
            .form-grid {
                grid-template-columns: 1fr;
            }

            .grid-container {
                grid-template-columns: 1fr;
            }

            .regions {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <div class="logo">
            <i class="fas fa-user-graduate"></i>
            <h1>学生志愿填报系统</h1>
        </div>
        <div class="header-buttons">
            <button class="btn btn-secondary">
                <i class="fas fa-file-export"></i> 导出列表
            </button>
            <button class="btn btn-main">
                <i class="fas fa-save"></i> 保存
            </button>
        </div>
    </div>

    <div class="student-info">
        <h2 class="section-title">
            <i class="fas fa-user-circle"></i> 学员基本信息
        </h2>
        <div class="form-grid">
            <div class="form-group">
                <label>编码</label>
                <input type="text" class="form-control" value="0001">
            </div>
            <div class="form-group">
                <label>姓名</label>
                <input type="text" class="form-control" value="张三">
            </div>
            <div class="form-group">
                <label>性别</label>
                <input type="text" class="form-control" value="男">
            </div>
            <div class="form-group">
                <label>学历</label>
                <input type="text" class="form-control" value="高中">
            </div>
            <div class="form-group">
                <label>家庭住址</label>
                <input type="text" class="form-control">
            </div>
        </div>
    </div>

    <div class="sidebar">
        <div class="section-title">
            <i class="fas fa-cog"></i> 系统功能
        </div>
        <div class="actions">
            <button class="btn btn-action">
                <i class="fas fa-user-plus"></i> 增加学员
            </button>
            <button class="btn btn-action">
                <i class="fas fa-filter"></i> 筛选计划
            </button>
            <button class="btn btn-action">
                <i class="fas fa-undo"></i> 恢复全部
            </button>
            <button class="btn btn-action">
                <i class="fas fa-edit"></i> 修改
            </button>
            <button class="btn btn-action">
                <i class="fas fa-print"></i> 打印志愿表
            </button>
            <button class="btn btn-action">
                <i class="fas fa-home"></i> 主界面
            </button>
            <button class="btn btn-action">
                <i class="fas fa-sign-out-alt"></i> 退出
            </button>
        </div>
    </div>

    <div class="filters">
        <h2 class="section-title">
            <i class="fas fa-search"></i> 数据查询与筛选条件
        </h2>

        <div class="note">
            <i class="fas fa-info-circle"></i> 以下内容用于数据查询、筛选条件 (以下各项如果都不选，即为全部)
        </div>

        <div class="grid-container">
            <div class="filter-section">
                <h3><i class="fas fa-map-marked"></i> 省份</h3>
                <div class="regions">
                    <div class="region-group">
                        <h4>华北</h4>
                        <div class="region-list">
                            <label class="checkbox-item">
                                <input type="checkbox"> 北京
                            </label>
                            <label class="checkbox-item">
                                <input type="checkbox"> 天津
                            </label>
                            <label class="checkbox-item">
                                <input type="checkbox"> 河北
                            </label>
                            <label class="checkbox-item">
                                <input type="checkbox"> 山西
                            </label>
                            <label class="checkbox-item">
                                <input type="checkbox"> 内蒙古
                            </label>
                        </div>
                    </div>

                    <div class="region-group">
                        <h4>东北</h4>
                        <div class="region-list">
                            <label class="checkbox-item">
                                <input type="checkbox"> 辽宁
                            </label>
                            <label class="checkbox-item">
                                <input type="checkbox"> 吉林
                            </label>
                            <label class="checkbox-item">
                                <input type="checkbox"> 黑龙江
                            </label>
                        </div>
                    </div>

                    <div class="region-group">
                        <h4>华东</h4>
                        <div class="region-list">
                            <label class="checkbox-item">
                                <input type="checkbox"> 上海
                            </label>
                            <label class="checkbox-item">
                                <input type="checkbox"> 江苏
                            </label>
                            <label class="checkbox-item">
                                <input type="checkbox"> 浙江
                            </label>
                            <label class="checkbox-item">
                                <input type="checkbox"> 安徽
                            </label>
                            <label class="checkbox-item">
                                <input type="checkbox"> 福建
                            </label>
                            <label class="checkbox-item">
                                <input type="checkbox"> 江西
                            </label>
                            <label class="checkbox-item">
                                <input type="checkbox"> 山东
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="filter-section">
                <h3><i class="fas fa-university"></i> 大学部分</h3>
                <div class="checkbox-grid">
                    <label class="checkbox-item">
                        <input type="checkbox"> 985
                    </label>
                    <label class="checkbox-item">
                        <input type="checkbox"> 双一流大学
                    </label>
                    <label class="checkbox-item">
                        <input type="checkbox"> 211
                    </label>
                    <label class="checkbox-item">
                        <input type="checkbox"> 有博士点
                    </label>
                    <label class="checkbox-item">
                        <input type="checkbox"> 有硕士点
                    </label>
                    <label class="checkbox-item">
                        <input type="checkbox"> 重点大学
                    </label>
                    <label class="checkbox-item">
                        <input type="checkbox"> 不限
                    </label>
                </div>
            </div>

            <div class="filter-section">
                <h3><i class="fas fa-book"></i> 专业部分</h3>
                <div style="max-height: 250px; overflow-y: auto; padding: 8px;">
                    <div class="checkbox-item">
                        <input type="checkbox"> ◆哲学
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox"> ◆经济学类
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox"> ◆伦理学
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox"> ◆经济统计学
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox"> ◆国民经济管理
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox"> ◆资源与环境经济学
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox"> ◆商务经济学
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox"> ◆能源经济
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox"> ◆法学
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox"> ◆教育学
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox"> ◆文学
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox"> ◆历史学类
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox"> ◆世界史
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox"> ◆考古学
                    </div>
                    <div class="checkbox-item">
                        <input type="checkbox"> ◆文物与博物馆学
                    </div>
                </div>
            </div>

            <div class="filter-section">
                <h3><i class="fas fa-user-md"></i> 身体要求(限本科专业)</h3>
                <p style="font-size: 13px; line-height: 1.5; margin-top: 10px;">
                    <i class="fas fa-exclamation-triangle" style="color: #ff9800;"></i>
                    身体要求内容说明，具体要求需看招生计划。本科专业对身体条件有一定要求，例如视力、身高、色觉等...
                </p>
                <div class="checkbox-grid" style="margin-top: 10px;">
                    <label class="checkbox-item">
                        <input type="checkbox"> 无特殊要求
                    </label>
                    <label class="checkbox-item">
                        <input type="checkbox"> 视力要求
                    </label>
                    <label class="checkbox-item">
                        <input type="checkbox"> 身高要求
                    </label>
                    <label class="checkbox-item">
                        <input type="checkbox"> 色觉要求
                    </label>
                </div>
            </div>
        </div>

        <div class="note">
            <i class="fas fa-info-circle"></i> 校正保存后才生效，具体要求需看招生计划
        </div>
    </div>

    <div class="main-footer">
        <div>
            <span><i class="fas fa-database"></i> 当前学员数: 23</span>
            <span style="margin-left: 20px;"><i class="fas fa-user-graduate"></i> 当前用户: 管理员</span>
        </div>
        <div>
            <span><i class="fas fa-sync-alt"></i> 最后更新时间: 2023-10-15 14:30</span>
        </div>
    </div>
</div>

<script>
    // 按钮悬停效果增强
    const buttons = document.querySelectorAll('.btn');
    buttons.forEach(btn => {
        btn.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-2px)';
            this.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.2)';
        });

        btn.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
            this.style.boxShadow = 'none';
        });
    });

    // 保存按钮功能
    document.querySelector('.btn-main').addEventListener('click', function() {
        alert('学员信息已成功保存！');
        this.innerHTML = '<i class="fas fa-check"></i> 已保存';
        setTimeout(() => {
            this.innerHTML = '<i class="fas fa-save"></i> 保存';
        }, 2000);
    });
</script>
</body>
</html>